import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
import 'package:vocamatch/models/item.dart';
import 'package:vocamatch/widgets/custom_divider.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final AudioCache player = AudioCache(prefix: "assets/audio/");
  late List<ItemModel> items;
  late List<ItemModel> items2;
  late int score;
  late int fullScore;
  late bool gameOver;
  late String appBarText;

  initGameState() {
    score = 0;
    appBarText = '宝贝识单词';
    items = [
      for (String i in <String>[
        'bicycle',
        'bus',
        'camel',
        'cow',
        'eagle',
        'fox',
        'hen',
        'horse',
        'kingfisher',
        'lion',
        'orange',
        'panda',
        'pigeon',
        'pineapple',
        'scooter',
        'sheep',
        'strawberry',
        'taxi',
        'watermelon',
        'woodpecker'
      ])
        ItemModel(value: i, name: i.toCapitalize(), img: 'assets/images/$i.png')
    ];
    items2 = [...items];
    fullScore = items.length * 10;
    items.shuffle();
    items2.shuffle();
  }

  @override
  void initState() {
    super.initState();
    initGameState();
  }

  @override
  Widget build(BuildContext context) {
    gameOver = items.isEmpty;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.secondary,
        centerTitle: true,
        elevation: 0,
        title: Text(
          appBarText,
          style: const TextStyle(
            color: Colors.white,
            fontFamily: 'chuchen',
            fontSize: 26,
            letterSpacing: 6,
          ),
        ),
      ),
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/bg.png'),
          ),
        ),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.only(
                    bottomLeft: Radius.circular(20),
                    bottomRight: Radius.circular(20)),
                color: Colors.pink.withOpacity(0.5),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(
                    Icons.swipe,
                    color: Colors.white70,
                  ),
                  const SizedBox(width: 10),
                  const Text(
                    '点击图片然后拖拽到对应的单词卡片上',
                    style: TextStyle(
                      color: Colors.white,
                      fontFamily: 'chuchen',
                      fontSize: 11,
                      letterSpacing: 6,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView(
                physics: const BouncingScrollPhysics(),
                padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 5),
                children: [
                  if (!gameOver) ...[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Wrap(
                          children: items.map((item) {
                            return Container(
                              margin: const EdgeInsets.all(1),
                              padding: const EdgeInsets.fromLTRB(0, 15, 0, 15),
                              child: Draggable<ItemModel>(
                                data: item,
                                childWhenDragging: CircleAvatar(
                                  backgroundColor: Colors.white,
                                  child: ClipOval(
                                    child: Image.asset(
                                      item.img,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  // radius: MediaQuery.of(context).size.width *
                                  //     0.076 *
                                  //     1.75,
                                ),
                                feedback: CircleAvatar(
                                  backgroundColor: Colors.white,
                                  child: ClipOval(
                                    child: Image.asset(
                                      item.img,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  radius: MediaQuery.of(context).size.width *
                                      0.0775,
                                ),
                                child: CircleAvatar(
                                  backgroundColor: Colors.white,
                                  child: ClipOval(
                                    child: Image.asset(
                                      item.img,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  radius: MediaQuery.of(context).size.width *
                                      0.0775,
                                ),
                              ),
                            );
                          }).toList(growable: false),
                        ),
                        Wrap(
                          children: items2.map((item) {
                            return DragTarget<ItemModel>(
                              onAccept: (receivedItem) {
                                if (item.value == receivedItem.value) {
                                  item.accepting = false;
                                  player.play('true.wav');
                                  items.remove(receivedItem);
                                  items2.remove(item);
                                  setState(() => score += 10);
                                  if (items.isEmpty) {
                                    _showDialog(
                                      title: '👍🏻 宝贝真棒 👍🏻',
                                      subtitle: generateResult(),
                                    );
                                  }
                                } else {
                                  item.accepting = false;
                                  player.play('false.wav');
                                  setState(() => score -= 5);
                                }
                                appBarText = '得分: $score/$fullScore';
                              },
                              onWillAccept: (receivedItem) {
                                setState(() => item.accepting = true);
                                return true;
                              },
                              onLeave: (receivedItem) {
                                setState(() => item.accepting = false);
                              },
                              builder: (context, acceptedItems, rejectedItems) {
                                return Container(
                                  decoration: BoxDecoration(
                                      color: item.accepting
                                          ? Colors.grey[400]
                                          : Colors.grey[200],
                                      border: Border.all(
                                        width: .5,
                                        color: Colors.white,
                                      )),
                                  alignment: Alignment.center,
                                  height: 50,
                                  width: MediaQuery.of(context).size.width / 4,
                                  child: Text(
                                    item.name,
                                    style: const TextStyle(
                                      fontSize: 15,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                );
                              },
                            );
                          }).toList(growable: false),
                        ),
                      ],
                    ),
                  ],
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  //Methods:
  String generateResult() {
    if (score == fullScore) {
      player.play('success.wav');
      return '漂亮!';
    } else {
      player.play('try_again.wav');
      return '再来一次';
    }
  }

  void _showDialog({required String title, required String subtitle}) {
    showDialog(
      barrierDismissible: false,
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
          backgroundColor:
              Theme.of(context).scaffoldBackgroundColor.withOpacity(0.90),
          title: Column(
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 25,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 5),
              CustomDivider(),
            ],
          ),
          content: Text(subtitle,
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.headline3),
          actions: [
            GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
                setState(() => initGameState());
              },
              child: Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey, width: 1),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: const Text('我知道啦', style: TextStyle(fontSize: 18)),
              ),
            ),
          ],
        );
      },
    );
  }
}

extension StringExtension on String {
  String toCapitalize() =>
      "${this[0].toUpperCase()}${substring(1).toLowerCase()}";
}
